<template>
    <div>
        <q-card class="at-member-card">
            <q-scroll-area class="profile-scroll-add q-pa-sm " :thumb-style="thumbStyle">
                <q-list bordered>
                    <q-item class="q-mb-sm"
                            clickable
                            v-ripple>
                        <q-item-section>
                            <q-item-label><span class="text-green">@全员</span></q-item-label>
                        </q-item-section>
                        <q-item-section side @click="toCommitATFu(-1)">
                            <q-btn flat round icon="alternate_email" size="xs"/>
                        </q-item-section>
                    </q-item>
                    <q-item v-for="(item,index) in groupInfo.memberList" :key="item.id" class="q-mb-sm"
                            clickable
                            v-ripple>
                        <q-item-section avatar @click="toAccountProfile(index)">
                            <q-avatar>
                                <img :src="item.img">
                            </q-avatar>
                        </q-item-section>

                        <q-item-section>
                            <q-item-label>{{ item.name }}</q-item-label>
                            <q-item-label caption lines="1">账号:
                                <span class="text-grey">{{ item.accountNum }}</span>
                            </q-item-label>
                        </q-item-section>
                        <q-item-section side>
                            <q-btn flat round icon="alternate_email" size="xs" @click="toCommitATFu(index)"/>
                        </q-item-section>
                    </q-item>
                </q-list>
            </q-scroll-area>
        </q-card>
    </div>

</template>

<script>
  import ProfileInfo from '../../profile/indexTwo'
  export default {
    name: "groupMembers",
    props: {
      groupInfo: Object
    },
    data () {
      return {
        selectIndex: 0,
        accountDetailShow: false,
      }
    },
    methods: {
      toAccountProfile (index) {
        this.selectIndex = index
        this.accountDetailShow = true
        this.$q.dialog({
          component: ProfileInfo,
          // 如果要访问自定义组件中的
          // 路由管理器、Vuex存储等,
          // 则为可选：
          parent: this, // 成为该Vue节点的子元素
                        // （“this”指向您的Vue组件）
                        // （此属性在<1.1.0中称为“root”
                        //  仍然可以使用，但建议切换到
                        //  更合适的“parent”名称）
          // （上述“component”和“parent”属性除外）：

          userInfo:this.groupInfo.memberList[index]
          // ...更多属性...
        })
      },
      toCommitATFu (index) {
        if (index !== -1) {
          this.$emit('atMember', this.groupInfo.memberList[index])
        } else {
          this.$emit('atMemberAll')
        }
      },
    },
    computed: {
      thumbStyle () {
        return {
          right: '2px',
          borderRadius: '5px',
          backgroundColor: '#4caf50',
          width: '1px',
          opacity: 0.75
        }
      }
    }
  }
</script>

<style scoped>
    .at-member-card {
        width: 350px;
        height: 50vh
    }

    .profile-scroll-add {
        height: 49vh;
        width: 100%;
    }

    .profile-scroll-add {
        min-height: 30vh;
        width: 100%;
    }


</style>
